<template>
  <div>
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list
    :cities="cities"
    :hot="hotCities"
    :letter="letter"></city-list>
    <city-alphabet
    :cities="cities"
    @change="handleLetterChange"></city-alphabet>
  </div>
</template>
<script>
  import axios from 'axios'
  import CityHeader from  './components/Header'
  import CitySearch from  './components/Srarch'
  import CityList from  './components/List'
  import CityAlphabet from  './components/Alphabet'
  export default  {
    name  : 'City',
    components:{
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data  ()  {
      return  {
        cities:  {},
        hotCities:[],
        letter:''
      }
    },
    methods:{
      getHomeInfo () {
        axios.get('/api/city.json')
        .then(this.handleGetCityInsoSucc)
      },
      handleGetCityInsoSucc (res)  {
          res = res.data
          if(res.ret && res.data){
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
      },
      //接受传过来的@change
      handleLetterChange(letter)  {
        this.letter = letter
          //console.log(letter)
      }
    },
    mounted ()  {
      this.getHomeInfo()
    }
  }
</script>

<style lang="stylus" scoped>
</style>
